<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无缝滚动2</title>
    <link rel="stylesheet" href="./banner.css" />
    <script src="./animate.js"></script>
    <script src="./copy.js"></script>
  </head>

  <body>
    <div class="banner">
      <!-- 轮播图 -->
      <ul class="imgBox clearFix">
        <li class="slider" style="background-color: red">A</li>
        <li class="slider" style="background-color: orange">B</li>
        <li class="slider" style="background-color: green">C</li>
        <li class="slider" style="background-color: pink">D</li>
        <li class="slider" style="background-color: yellow">E</li>
      </ul>

      <!-- 指示器存放处 -->
      <ol class="pointBox"></ol>

      <div class="leftRightTabs">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
      </div>
    </div>

    <script>
      /* 找出元素 */
      var box, ul, sliders, ol, btnPrev, btnNext, pointers;

      // 自动轮播定时器（全局仅此一例）
      var autoplayTimer = null;

      // 当前页码(0~6)  [5]12345[1]
      // 滚动的目标位置：-600*currentIndex +"px"
      // 轮播的核心参数：范围[0,6] 0=>5 6=>1
      var currentIndex = 1;

      /* 找出DOM元素 */
      function findElements() {
        //
        box = document.querySelector(".banner");

        // 轮播图
        ul = document.querySelector(".imgBox");
        // 幻灯片页
        sliders = ul.querySelectorAll(".slider");

        // 指示器容器
        ol = document.querySelector(".pointBox");

        // 上一张 下一张
        btnPrev = document.querySelector(".prev");
        btnNext = document.querySelector(".next");
      }

      /* 初始化无限轮播 */
      function initLoop() {
        /* 添加欺骗头尾 [5]12345[1]*/
        ul.innerHTML =
          `<li class="slider" style="background-color: yellow">5</li>` +
          ul.innerHTML +
          `<li class="slider" style="background-color: red">1</li>`;

        // 重新设置Ul的宽度
        ul.style.width = 600 * 7 + "px";
      }

      /* 每个原始幻灯片对应一个指示器 并暗藏序号[1,5] */
      function initPointers() {
        /* 添加指示器 */
        // 每张原始幻灯片（不算头尾）对应一个指示器
        // sliders=原始5张幻灯片 序号[0,6]中对应[1,5]
        sliders.forEach(function (slider, index) {
          var pointer = document.createElement("li");

          // 给指示器暗藏序号[1,5] 略过了0和6
          pointer.setAttribute("index", index + 1);
          ol.appendChild(pointer);
        });
        // 找出所有的指示器
        pointers = ol.querySelectorAll("li");
      }

      /* 运动到currentIndex对应的位置 */
      function animateToCurrentIndex() {
        animate(
          ul, //想染谁动
          { left: -600 * currentIndex + "px" }, //目标状态
          500, //耗时

          // 动画结束回调函数
          // 校正序号 令其范围保持在[1,5]
          function () {
            console.log("动画结束了，callback被回调了", currentIndex);

            /* 移形换影 6=>1 0=>5*/
            if (currentIndex === 6) {
              currentIndex = 1;
              // 瞬间移位
              ul.style.left = -600 * currentIndex + "px";
            }

            if (currentIndex === 0) {
              currentIndex = 5;
              // 瞬间移位
              ul.style.left = -600 * currentIndex + "px";
            }

            // 对应的指示器高亮
            updatePointers();
          }
        );
      }

      /* 页码更新落位后 暗藏currentIndex的指示器高亮 */
      function updatePointers() {
        // 掐灭所有指示器
        pointers.forEach(function (p) {
          p.classList.remove("active");
        });

        /* 哪个指示器暗藏了currentIndex就将其点亮 */
        // 将指示器伪数组转为真数组（以便使用批处理函数find）
        for (var i = 0; i < pointers.length; i++) {
          // index这个attribute对应的值是字符串 currentIndex为number 此处使用值等
          if (pointers[i].getAttribute("index") == currentIndex) {
            pointers[i].classList.add("active");

            // 已经找出了高亮的指示器 轮询结束
            break;
          }
        }
      }

      /* 添加互动 */
      // 上一张
      function prev() {
        currentIndex--;
        animateToCurrentIndex();
      }

      // 下一张
      function next() {
        currentIndex++;
        animateToCurrentIndex();
      }

      function startAutoPlay() {
        // 如果自动轮播定时器没有启动 则启动一个（绝不会有第二个）
        if (autoplayTimer === null) {
          autoplayTimer = setInterval(function () {
            next();
          }, 2000);
        }
      }

      function stopAutoPlay() {
        if (autoplayTimer) {
          clearInterval(autoplayTimer);

          // 标记轮播已停止
          autoplayTimer = null;
        }
      }

      /* 初始化所有监听器 */
      function initListeners() {
        // 上一张
        btnPrev.onclick = function (e) {
          // 让Ul的left样式-600像素
          // ul.style.left = parseFloat(getComputedStyle(ul).left) + 600 + "px";
          prev();
        };

        // 下一张一张
        btnNext.onclick = function (e) {
          // 让Ul的left样式-600像素
          // ul.style.left = parseFloat(getComputedStyle(ul).left) - 600  +"px"
          next();
        };

        // 点击指示器
        // 此处使用了事件委托（5个指示器点击监听器合并在ol一人身上）
        ol.onclick = function (e) {
          // 点击的末梢元素如果是LI=用户点击了指示器
          if (e.target.nodeName === "LI") {
            var index = e.target.getAttribute("index");
            console.log(index);

            // 滑动到对应的目标页
            currentIndex = index;

            // 动画到当前序号
            animateToCurrentIndex();
          }
        };

        /* 当鼠标覆盖box时停止轮播 */
        box.onmouseenter = function (e) {
          stopAutoPlay();
        };

        /* 当鼠标离开box时开始轮播 */
        box.onmouseleave = function (e) {
          startAutoPlay();
        };
      }

      // 找出所有元素
      findElements();

      // 初始化无限轮播（加头加尾改宽度）
      initLoop();

      // 每个原始幻灯片对应一个指示器 并暗藏序号[1,5]
      initPointers();

      // currentIndex初始值为1 先点亮第一个指示器
      updatePointers();

      // 开始轮播
      startAutoPlay();

      // 初始化监听器
      // 上下张 prev() next()
      // 点击指示器：修改页码然后动画过去 animateToCurrentIndex()
      // 移入移出box startAutoPlay() stopAutoPlay()
      initListeners();

    </script>
  </body>
</html>
